<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小练习</title>
</head>
<style>
    table{
        width: 100%; /* 使表格始终占据网页页面的全部 */
        border-collapse: collapse; /*使表格之间的空隙合并 */

    }
    th,td{
        border: 1px solid #ddd;
        background-color: aqua;
        text-align: center;/* 使内容居中显示· */
        padding: 8px;/*内边距 */
      
    }

    th{
        background-color: #ddd;
    }
</style>


<body>
    <h1 style="font-size: 20px ;text-align: center;">联系人表格</h1>
    <button onclick="addRows()">新建信息</button>
     <br>
    <br>
    <table id="table">
        <tr>
            <th>姓名</th>
           <th>联系方式</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>葛佳驿</td>
            <td>15256109209</td>
            <!-- this关键字指向当前的对象，类似java中的this的作用 -->
            <td> <button onclick="deleteRows(this)">删除</button> <button onclick="editrows(this)">编辑</button></td>
        </tr>
        <tr>
            <td>邓紫棋</td>
            <td>08160816</td>
            <td> <button onclick="deleteRows(this)">删除</button> <button onclick="editrows(this)">编辑</button></td>
        </tr>
    </table> 
    <script src="JS\table.js"></script>

</body>
</html>